<template>
  <div class="UserFollows">
    <shop-header>我的关注</shop-header>
    <div class="main" v-for="item in info" :key="item.id">
      <div class="left">
        <img :src="$axios.defaults.baseURL + item.head_img" alt="" />
      </div>
      <div class="center">
        <div class="nickname">{{ item.nickname }}</div>
        <div class="date">{{ item.create_date | date }}</div>
      </div>
      <div class="right">
        <van-button
          round
          type="info"
          color="grey"
          size="mini"
          @click="unFollow(item.id)"
          >取消关注</van-button
        >
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      info: [],
    };
  },
  methods: {
    async getinfo() {
      const res = await this.$axios.get("/user_follows");
      this.info = res.data.data;
    },
    unFollow(id) {
      this.$dialog
        .confirm({
          title: "温馨提示",
          message: "您确定要取消关注该用户吗？",
        })
        .then(async () => {
          const res = await this.$axios.get(`/user_unfollow/${id}`);
          console.log(res);
          this.getinfo();
          this.$toast.success("取消关注成功");
        })
        .catch(() => {
          // on cancel
        });
    },
  },
  created() {
    this.getinfo();
  },
};
</script>

<style scoped lang='less'>
.UserFollows {
  .main {
    display: flex;
    padding: 10px;
    align-items: center;
    .left {
      img {
        height: 60px;
        object-fit: contain;
      }
    }
    .center {
      flex: 1;
      padding: 0 10px;
      .nickname {
        font-size: 20px;
        padding-bottom: 10px;
      }
      .date {
        font-size: 15px;
        opacity: 0.6;
      }
    }
  }
}
</style>